"use client";

import React, { Children } from "react";
import Link from "next/link";
import { Row, Col, Grid, Space, Popover, Dropdown, Card } from "antd";
import Image from "next/image";
import "./index.scss";
import { AlignCenterOutlined } from "@ant-design/icons";

const routes = [
  { name: "首页", path: "/" },
  { name: "产品介绍", path: "/products" },
  {
    name: "产品文档",
    path: "/pro-docs",
    children: [
      {
        name: "产品文档1",
        path: "/rule-main",
        target: "_blank",
        dis: "规则管理，赋能企业成长",
      },
      {
        name: "产品文档2",
        path: "/rule-equipment-management",
        dis: "规则自动化管理、助力企业提效减耗",
        target: "_blank",
      },
    ],
  },
  { name: "关于我们", path: "/about-us" },
  { name: "联系我们", path: "/contact-us" },
  { name: "语言", path: "/lang" },
];
const PageHeader = ({}) => {
  return (
    <div className="header">
      <Row className="row w-full">
        <Col sm={12} md={4}>
          <div className="h-full flex-center">
            <Link href="/">
              <Image
                src="/zhiping/logo.png"
                alt="zhiping"
                className="sm:w-[9rem] md:w-[8rem] xl:w-[7rem] 2xl:w-[6rem] w-[9rem]"
                width={120}
                height={42}
              />
            </Link>
          </div>
        </Col>
        <Col
          className="h-full space-x-6 hidden other-menu justify-end"
          flex={1}
          id="header-menu"
        >
          {routes.map((route, index) => {
            const { name, path, children = [] } = route;
            return (
              <div key={name} className="flex h-full hvr-underline-from-center">
                {children.length ? (
                  <Dropdown
                    autoAdjustOverflow
                    placement="bottom"
                    dropdownRender={() => (
                      <div className="head-sub-menu">
                        {children.map((item) => (
                          <MLink {...item} key={item.name} />
                        ))}
                      </div>
                    )}
                  >
                    <Link
                      href={path}
                      rel="noopener noreferrer"
                      className="h-full flex-center head-link sm:text-xl md:text-xl"
                    >
                      {name}
                    </Link>
                  </Dropdown>
                ) : (
                  <div className="h-full">
                    <Link
                      href={path}
                      rel="noopener noreferrer"
                      className="h-full flex-center head-link sm:text-xl md:text-xl"
                    >
                      {name}
                    </Link>
                  </div>
                )}
              </div>
            );
          })}
        </Col>
        <Col flex={1} className="h-full hidden app-menu justify-end">
          <Dropdown
            menu={{
              items: routes.map((item) => ({
                key: item.name,
                label: <a href={item.path}>{item.name}</a>,
              })),
            }}
            trigger={["hover", 'click']}
          >
            <AlignCenterOutlined style={{ color: '#fff', fontSize: 16, fontWeight: 600 }} />
          </Dropdown>
        </Col>
      </Row>
    </div>
  );
};

const MLink = ({ name, path, target, dis }) => {
  return (
    <div style={{ marginBottom: "24px" }}>
      <Link
        href={path}
        target={target}
        rel="noopener noreferrer"
        className="header-link"
      >
        <div>{name}</div>
      </Link>
      <div style={{ fontSize: 12, color: "#1b1b1b" }}>{dis}</div>
    </div>
  );
};

export default PageHeader;
